<template>
    <div id="pushed">
      <div class="select-group">
        <div class="items">
          <span class="items-text">批次名称</span>
          <el-select v-model="query.folderId" clearable filterable placeholder="请选择">
            <el-option
              v-for="item in folderList"
              :key="item.value"
              :label="item.orgName"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="items">
          <span class="items-text">目标机构</span>
          <el-select v-model="query.orgId" clearable filterable placeholder="请选择">
            <el-option
              v-for="item in orgList"
              :key="item.value"
              :label="item.orgName"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="select-group">
        <div class="items">
          <span class="items-text">行业</span>
          <el-select v-model="query.industryId" clearable filterable placeholder="请选择">
            <el-option
              v-for="item in industry"
              :key="item.industryId"
              :label="item.industryName"
              :value="item.industryId">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="select-group">
        <div class="items">
          <span class="items-text">时间范围</span>
          <el-date-picker
            v-model="query.timeValue"
            type="daterange"
            unlink-panels
            value-format='yyyy-MM-dd'
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickOption">
          </el-date-picker>
        </div>
        <el-button :disabled="listLoading" @click="getList" size="medium" type="success" class="el-icon-search searchBtn">
          <span style="padding-left:5px;">查询</span>
        </el-button>
      </div>

      <router-link :to="{path:'/pushed/waitList'}">
        <div class="listCart fa fa-th-list">
          <i class="num">{{waitListCount}}</i>
        </div>
      </router-link>

      <h4>数据列表</h4>
      <el-table empty-text="暂无任何数据信息" :data="list" v-loading.body="listLoading" border fit style="width: 100%">
        <el-table-column align="center" label="批次名称" >
          <template slot-scope="scope">
            <router-link @click.native="saveLocal(scope.row)" :to="{path:'/pushed/pushedlist'}">
              <span class="clickText">{{scope.row.folderName}}</span>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column align="center" label="目标机构">
          <template slot-scope="scope">
            <span>{{scope.row.orgName}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="行业">
          <template slot-scope="scope">
            <span>{{scope.row.industryName ? scope.row.industryName : '-'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="推送数量">
          <template slot-scope="scope">
            <span>{{ scope.row.pushCount}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="重单数量">
          <template slot-scope="scope">
            <span>{{ scope.row.repeatCount}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="推送时间">
          <template slot-scope="scope">
            <span>{{ scope.row.PushTime}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <span>{{ checkStatus[scope.row.checkStatus]}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" width="220">
          <template slot-scope="scope">
            <el-button @click="openDialog(scope.row)" type="default" size="small">撤回</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-show="!listLoading" class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" prev-text="上一页" next-text="下一页" @current-change="handleCurrentChange" :current-page.sync="query.current"
                       :page-sizes="[10,20,30,50]" :page-size="query.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>


      <el-dialog
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-alert
          title="确认撤回此数据?"
          type="warning"
          show-icon
          :closable="false"
        >
        </el-alert>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="reback">确 定</el-button>
      </span>
      </el-dialog>

    </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import { getOrgList ,getFolderList ,getPushedList ,deletePushed  , getWaitList} from '@/api/datapush';
  import { getIndustryList } from '@/api/user';
  import {filterObj,transformTimeValue} from '@/utils/index';
    export default {
        name: "pushed",
        data(){
          return {
            waitListCount:'',
            clickRowData:{},
            dialogVisible:false,
            checkStatus:{1:'未接收',2:'审查中',3:'已接收'},
            listLoading: false,
            total:0,
            list:[],
            query:{
              userId:'',
              current:1,
              pagesize:10,
              folderId:'',
              orgId:'',
              industryId:'',
              timeValue:[]
            },
            folderList:[],
            orgList:[],
            industry:[],

            pickOption: {
              shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近一个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  picker.$emit('pick', [start, end]);
                }
              }]
            },
          }
        },
        computed:{
          ...mapGetters([
            'userInfo'
          ])
        },
        created(){
          if(this.userInfo.roleId == 1 && !this.userInfo.companyId){
            this.$message.error('当前身份没有companyId,请去首页设置临时公司身份');
          } else {
            this.query.companyId = this.userInfo.companyId;
            this.getOption();
            this.getList();
          }
        },
        watch: {
          // 如果路由有变化，会再次执行该方法
          '$route'(to,from){
            if(to.path === '/datapush/pushed'){
              if(this.userInfo.roleId == 1 && !this.userInfo.companyId){
                this.$message.error('当前身份没有companyId,请去首页设置临时公司身份');
              } else {
                this.query.companyId = this.userInfo.companyId;
                this.getOption();
                this.getList();
              }
            }
          }
        },
        methods:{
          getOption(){
            this.query.userId = this.userInfo.userId;
            this.getIndustryList();
            this.getOrgList();
            this.getFolderList();
            this.getPustCount();
          },
          getPustCount(){
            getWaitList({companyId:this.userInfo.companyId}).then(res=>{
              this.waitListCount = res.data.total;
            }).catch(res=>{
              this.$message.error(res);
            })
          },
          getList(){
            let temp = this.filterObj(this.transformTimeValue(this.query));
            this.listLoading = true;
            getPushedList(temp).then(res=>{
              this.total = res.data.total;
              this.list = res.data.info;
              this.listLoading = false;
            }).catch(res=>{
              this.listLoading = false;
              this.$message.error(res)
            })
          },
          getFolderList(){
            getFolderList(this.userInfo.userId).then(res=>{
              this.folderList = res.data.info;
            }).catch(res=>{
              this.$message.error(res);
            })
          },
          getIndustryList(){
            getIndustryList().then(res=>{
              let temp = res.data.info;
              this.industry = temp;
            }).catch(res=>{
              this.$message.error(res)
            })
          },
          getOrgList(){
            getOrgList().then(res=>{
              let temp = res.data.info;
              this.orgList = temp;
            }).catch(res=>{
              this.$message.error(res)
            })
          },
          openDialog(val){
            this.clickRowData = JSON.parse(JSON.stringify(val));
            this.dialogVisible = true;
          },
          reback(){
            let temp = {
              folderId:this.clickRowData.folderId,
              orgId:this.clickRowData.orgId
            }
            deletePushed(temp).then(res=>{
              this.dialogVisible = false;
              this.$message.success(res.msg);
              this.getList();
            }).catch(res=>{
              this.dialogVisible = false;
              this.$message.error(res)
            })
          },
          handleSizeChange(val) {
            this.query.pagesize = val;
            this.getList();
          },
          handleCurrentChange(val){
            this.query.current = val;
            this.getList();
          },
          saveLocal(item){
            let local_user = localStorage.getItem('PUSHED_DATA');
            !!local_user ? localStorage.removeItem('PUSHED_DATA') : null;
            localStorage.setItem('PUSHED_DATA',JSON.stringify(item))
          },
          filterObj,
          transformTimeValue
        }
    }
</script>

<style type="text/scss" lang="scss"  scoped>
  @import '~@/styles/variables.scss';
  #pushed {
    .clickText {
      color: $mainBuleColor;
      text-decoration: underline;
    }
    .el-alert--warning {
      background-color:#fff
    }
    .listCart {
      cursor: pointer;
      z-index: 1000;
      position: fixed;
      right: 15%;
      bottom: 5%;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      display: inline-block;
      background-color: #ccc;
      text-align: center;
      font-size: 50px;
      line-height: 80px;
      color: #eee;
      i {
        position: absolute;
        right: 1px;
        font-style: normal;
        display: inline-block;
        width: 26px;
        height: 26px;
        background-color: red;
        color: #fff;
        text-align: center;
        line-height: 26px;
        font-size: 14px;
        border-radius: 50%;
      }
    }
    .searchBtn {
      margin-left: 80px;
    }
  }
</style>
